<template>
    <div>
        <h1>新增房型</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.HouseTypeName">
                    </td>
                </tr>

                <tr>
                    <td>门市价</td>
                    <td>
                        <input type="text" v-model="queryInfo.HouseTypePrice">
                    </td>
                </tr>

                <tr>
                    <td>押金</td>
                    <td>
                        <input type="radio" name="ya" :value="1" v-model="queryInfo.YaMoney" checked>不需要
                        <input type="radio" name="ya" :value="0" v-model="queryInfo.YaMoney">需要
                    </td>
                </tr>

                <tr>
                    <td>房型面积</td>
                    <td>
                        <input type="text" v-model="queryInfo.HouseTypeSize">
                    </td>
                </tr>

                <tr>
                    <td>可住人数</td>
                    <td>
                        <input type="text" v-model="queryInfo.HouseTypePeople">
                    </td>
                </tr>

                <tr>
                    <td>可否加床</td>
                    <td>
                        <input type="radio" name="bed" :value="1" v-model="queryInfo.IfAddbed" checked>不可加床
                        <input type="radio" name="bed" :value="2" v-model="queryInfo.IfAddbed">免费加床
                        <input type="radio" name="bed" :value="3" v-model="queryInfo.IfAddbed">收费加床
                        <input type="radio" name="bed" :value="4" v-model="queryInfo.IfAddbed">自定义
                    </td>
                </tr>

                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="queryInfo.HouseTypeState" checked>上架
                        <input type="radio" name="state" :value="0" v-model="queryInfo.HouseTypeState">下架
                    </td>
                </tr>

                <tr>
                    <td>房型图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="queryInfo.HouseTypePhoto" alt="" width="100px" height="100px"
                            v-if="queryInfo.HouseTypePhoto != ''">
                    </td>
                </tr>

                <tr>
                    <td>房型介绍</td>
                    <td>
                        <textarea cols="30" rows="5" v-model="queryInfo.HouseTypeIntro"></textarea>
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

let queryInfo: any = reactive({
    "Id":route.query.id,
    "HouseTypeName": "",
    "HouseTypePrice": '',
    "YaMoney": 1,
    "HouseTypeSize": '',
    "HouseTypePeople": '',
    "IfAddbed": 1,
    "HouseTypeState": 1,
    "HouseTypePhoto": "",
    "HouseTypeIntro": "",
    "IsDeleted": false
})

onMounted(()=>{
    fan()
})

const fan=()=>{
    axios({
        url:"/api/HouseType/Fan",
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(queryInfo,res.data)
    })
    .catch(err=>{
        console.log(err);
        
    })
}

const img = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj)
    axios({
        url: '/api/Img/Imgs',
        method: 'post',
        data: f
    })
        .then(res => {
            console.log(res);
            queryInfo.HouseTypePhoto = res.data
        })
        .catch(err => {
            console.log(err);

        })
}

const ok = () => {
    if (queryInfo.HouseTypeName == "") {
        alert('房型名称不能为空')
        return
    }
    if (queryInfo.HouseTypePrice == "") {
        alert('门市价不能为空')
        return
    }
    if (queryInfo.HouseTypePeople == "") {
        alert('可住人数不能为空')
        return
    }
    if (queryInfo.HouseTypePhoto == "") {
        alert('房型图片不能为空')
        return
    }
    if (queryInfo.HouseTypeIntro == "") {
        alert('房型介绍不能为空')
        return
    }
    axios({
        url: '/api/HouseType/UpdHouseType',
        method: 'put',
        data: queryInfo
    })
        .then(res => {
            console.log(res);
            if (res.data == -1) {
                alert('该房型名称已存在，请重新输入！')
                return
            }
            else if (res.data > 0) {
                alert('修改成功')
                router.push('/showType')
            }
            else {
                alert('修改失败')
                return
            }
        })
        .catch(err => {
            console.log(err);

        })
}

</script>

<style scoped></style>